<template>
	<view class="workerInfo">
		<view class="upside">
			<view class="msg">
				<view class="tip">工号:</view>
				<view  class="content" v-if="this.disabled === true">{{this.workerInfo.username}}</view>
				<input class="content-input" v-else v-model="this.workerInfo.username"></input>
			</view>
			<view class="msg">
				<view class="tip">姓名:</view>
				<view  class="content" v-if="this.disabled === true">{{this.workerInfo.realName}}</view>
				<input class="content-input" v-else v-model="this.workerInfo.realName"></input>
			</view>
			<view class="msg">
				<view class="tip">身份:</view>
				<view  class="content" v-if="this.disabled === true">{{roleList[this.workerInfo.role-1].name}}</view>
				<view v-else style="width: 80%;height: 28px;display: flex;">
					<picker @change="roleConfirm" :value="roleId" :range="roleList" range-key="name" class="select">
						<view class="confirm">
							<view style="margin-left: 5px;width: 80%;">{{ roleList[this.workerInfo.role-1].name }}</view>
							<fui-icon name="arrowdown" style="justify-self: flex-end;"></fui-icon>
						</view>
					</picker>
				</view>
<!-- 				<input class="content-input" v-else :value="this.workerInfo.role"></input> -->
			</view>
			<view class="msg">
				<view class="tip">班组:</view>
				<view  class="content" v-if="this.disabled === true">{{this.workerInfo.class}}</view>
				<view v-else style="width: 80%;height: 28px;display: flex;">
					<picker mode='selector' @change="classConfirm" :value="index" :range="classList" range-key="className" class="select">
						<view class="confirm">
							<view style="margin-left: 5px;width: 80%;">{{ classList[index].className }}</view>
							<fui-icon name="arrowdown" style="justify-self: flex-end;"></fui-icon>
						</view>
					</picker>
				</view>
<!-- 				<input class="content-input" v-else :value="this.workerInfo.class"></input> -->
			</view>
			<view class="msg">
				<view class="tip">电话:</view>
				<view  class="content" v-if="this.disabled === true">{{this.workerInfo.phone}}</view>
				<input class="content-input" v-else v-model="this.workerInfo.phone"></input>
			</view>
			<view class="msg">
				<view class="tip">邮箱:</view>
				<view  class="content" v-if="this.disabled === true">{{this.workerInfo.email}}</view>
				<input class="content-input" v-else v-model="this.workerInfo.email"></input>
			</view>
		</view>
		<view class="downside">
			<button v-if="disabled === true" class="btn" type="primary" @tap="changeMsg">修改信息</button>
			<button v-if="disabled === true" class="btn" type="warn" @tap="deleteMsg">删除工人</button>
			<button v-if="disabled === false" class="btn" type="primary" @tap="confirmChange">完成</button>
			<button v-if="disabled === false" class="btn" type="primary" @tap="()=>{
				this.disabled =true
			}">取消</button>
		</view>
	</view>
</template>

<script>
	 import request from '../../../common/request'
	export default {
		data() {
			return {
				disabled:true,
				classId:0,
				index:0,
				roleId:0,
				workerInfo:{},
				roleList:[{name:"管理员"},{name:"根用户"},{name:"编辑者"}],
				classList:[],
				title : ''
			}
		},
		onLoad(options) {
			this.workerInfo.userId = options.userId
			console.log("userId=" + this.workerInfo.userId)
			this.getClasses()
			this.getWorkInfo()
		},
		methods: {
			changeMsg(){
				this.disabled = false
				this.updateWorker()
			},
			deleteMsg(){
				uni.showModal({
					content:"此操作无法撤销，确定要删除该工人信息吗？",
					success: (res) => {
						if(res.confirm){
							this.deleteWorker()
							// 删除工人信息
							console.log("删除成功")
							uni.navigateBack()
						}
					}
				})
			},
			confirmChange(){
				//修改信息
				request('/users/account/fixAccount','PUT',{},{
					userId : this.workerInfo.userId,
					username : this.workerInfo.username,
					realName : this.workerInfo.realName,
					email : this.workerInfo.email,
					phone : this.workerInfo.phone,
					classId: this.classId,
					role: this.roleId,
				}).then(res=>{
					console.log("修改信息")
					console.log(res)
					if(res.data.code === 0){
						this.disabled = true
						uni.showToast({
							title:"修改成功",
							icon:'none',
						})
					}else{
						uni.showToast({
							title:"修改失败，请稍后重试",
							icon:'none',
						})
					}
				})
				
			},
			classConfirm(e){
				console.log(e)
				this.index = e.detail.value
				console.log(this.classList[this.index].classId)
				console.log(this.classList[this.index])
				this.classId = this.classList[this.index].classId
			},
			roleConfirm(e){
				console.log(e)
				this.roleId = e.detail.value + 1
			},
			getClasses(){
				request('/users/class/getClasses','GET').then(res=>{
					console.log("获取班组：")
					console.log(res)
					this.classList = res.data.data
					console.log(this.classList[0].className)
				})
			},
			getWorkInfo(){
				request('/users/account/getUserInfo','GET',{},{
					userId : this.workerInfo.userId
				}).then(res=>{
					console.log("获取工人信息:")
					console.log(res.data.data)
					this.workerInfo = res.data.data
					this.roleId = this.workerInfo.role
					this.classId = this.workerInfo.classId
					this.getClassName()
				})
			},
			getClassName(){
				request(`/users/class/getClass/${this.workerInfo.classId}`,'GET').then(res=>{
					console.log(res)
					this.workerInfo.class = res.data.data.className
				})
			},
			updateWorker(){
				console.log(this.workerInfo.username)
				console.log(this.workerInfo.realName)
				console.log(this.workerInfo.email)
				console.log(this.workerInfo.phone)
				if(this.workerInfo.username == '' || this.workerInfo.realName == '' || this.workerInfo.email== '' || this.workerInfo.phone == ''){
					console.log("有内容未填写，请填写完在提交！")
					uni.showToast({
						title:"您有内容未填写，请填写完在提交！",icon:'none',
					})
				}else{
					request('/users/account/fixAccount','PUT',{},{
						userId:this.workerInfo.userId,
						username:this.workerInfo.username,
						realName:this.workerInfo.realName,
						email:this.workerInfo.email,
						phone:this.workerInfo.phone,
						classId:this.classId,
						role:this.roleId
					}).then(res=>{
						console.log(res)
					})
				}
			},
			deleteWorker(){
				request('/users/account/deleteUser','DELETE',{},{
					userId:this.workerInfo.userId
				}).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped>
.workerInfo{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.upside{
	margin-top: 20px;
	width: 80%;
	background-color: #f5f5f5;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
}
.msg{
	display: flex;
	margin-bottom: 10px;
}
.tip{
	font-size: 20px;
	margin-right: 10px;
}
.content{
	font-size: 20px;
}
.content-input{
	font-size: 20px;
	width: 80%;
	background-color: #fff;
}
.downside{
	width: 90%;
}
.btn{
	margin-top: 20px;
	border-radius: 15px;
}
.select{
	width: 100%;
	height: 28px;
}
.confirm{
	background-color: #fff;
	width: 100%;
	height: 28px;
	display: flex;
	justify-content: left;
	font-size: 20px;
}
</style>